<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        div {
            width: 850px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }
        
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        li {
            border-bottom: 1px dashed #ddd;
        }
        
        span {
            display: inline-block;
            text-align: right;
            width: 100px;
            height: 100%;
        }
        
        a {
            text-decoration: none;
            color: darkblue;
            font-size: 13px;
            padding: 5px 8px;
            cursor: pointer;
        }
        
        a:hover {
            background-color: darkorange;
            color: white;
        }
        
        p {
            display: inline-block;
            margin: 0;
            width: 100%;
            height: 100%;
            line-height: 40px;
        }
        
        .p {
            margin-left: 105px;
        }
        
        .list p a {
            font-size: 13px;
            color: #000;
            border: 1px solid coral;
            margin: 0 5px;
            /*padding: 0;*/
        }
        
        .ccc {
            float: right;
            position: relative;
            top: -30px;
            font-size: 12px;
            color: coral;
            cursor: pointer;
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <!--品牌-->
            <li>
                <p><span>品牌：</span>
                    <a>小米</a>
                    <a>苹果</a>
                    <a>华为</a>
                    <a>中兴</a>
                    <a>魅族</a>
                    <a>诺基亚</a>
                    <a>乐视</a>
                    <a>酷派</a>
                    <a>联想</a>
                    <a>小米</a>
                    <a>苹果</a>
                    <a>华为</a>
                    <a>中兴</a>
                    <a>魅族</a>
                    <a>诺基亚</a>
                </p>
                <p class="p">
                    <a>乐视</a>
                    <a>酷派</a>
                    <a>联想</a>
                    <a>华为</a>
                    <a>中兴</a>
                    <a>魅族</a>
                    <a>诺基亚</a>
                </p>
            </li>
            <!--价格-->
            <li>
                <p><span>价格：</span>
                    <a>500元以下</a>
                    <a>500-1000元</a>
                    <a>1000-1500元</a>
                    <a>1500-2000元</a>
                    <a>2000-3000元</a>
                    <a>3000-4000元</a>
                    <a>4000元以上</a>
                </p>
            </li>
            <!--尺寸-->
            <li>
                <p><span>屏幕尺寸：</span>
                    <a>6.0英寸以上</a>
                    <a>5.5-6.0英寸</a>
                    <a>5.0-5.5英寸</a>
                    <a>4.5-5.0英寸</a>
                    <a>4.0-5.5英寸</a>
                    <a>4.0英寸以下</a>
                </p>
            </li>
            <!--网络-->
            <li>
                <p>

                    <span>网络：</span>
                    <a>全网通</a>
                    <a>双4G</a>
                    <a>移动4G</a>
                    <a>联通4G</a>
                    <a>电信4G</a>
                </p>
            </li>
            <!--核心数-->
            <li>
                <p>
                    <span>核心数：</span>

                    <a>十核</a>
                    <a>八核</a>
                    <a>双四核</a>
                    <a>四核</a>
                    <a>双核及以下</a>
                </p>
            </li>
            <!--特性-->
            <li>
                <p>

                    <span>特性：</span>
                    <a>大屏幕</a>
                    <a>双卡双待</a>
                    <a>指纹识别</a>
                    <a>千元机</a>
                    <a>拍照神器</a>
                </p>
            </li>
            <!--您已选择-->
            <li class="list">
                <p>
                    <span>您已选择：</span>
                </p>
                <span class="ccc">清除筛选条件</span>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    $('a').click(function () {
        // 在选择中创建新标签
        $('.list p').append('<a>' + $(this).html() + 'x</a>')
        $(this).css('background-color', 'darkorange')
        // alert('点击了a')
        // 点击删除筛选出的项目
        $('.list a').click(function () {
            $(this).remove()
        })

        var ain = $('.list p a').length
        console.log(ain)
        if (ain >= 2) {
            $('.list .ccc').show()
        } else {
            $('.list .ccc').hide()
        }
    })
    // 点击清除筛选清空所有标签
    $('.list .ccc').click(function () {
        $('a').css('background-color', '')
        // $(this).remove()
        $('.list a').remove()
    })

</script>